<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box */
        /* #btn {

        } */
    </style>
</head>

<body>
    <button id="btn">点击登录</button>
    <ul>
        <li class="firstLi">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <div class="box">迪丽热巴</div>
    <div class="box">古力娜扎</div>
    <script>
        // ECMAscript dom  bom 
        // w3c DOM获取元素的规范
        // var btn = document.getElementById('btn')
        // w3c css 获取元素的规范
        var btn = document.querySelector('#btn')
            // 获取到的是一个HTML集合  动态集合
            // var lis = document.getElementsByTagName('li')
            // console.log(lis)
        console.log(btn)
            // 获取到的是静态的集合
        var box = document.querySelectorAll('.box')
        console.log(box instanceof Array)
            // var lis = document.querySelector('li')
        var lis = document.querySelectorAll('li')
        console.log(lis)
            // var stars = document.getElementsByClassName('box')
            // console.log(stars)
            //     // console.log(stars instanceof Array)
            //     // console.log(Array.isArray(lis))
            // console.log(lis.constructor === Array)
            // var arr = []
            // var newArr = new Array()
    </script>
</body>

</html>